<template>
  <!-- AQI占比-柱状图 -->
  <div class="barWrapper">

    <!-- 加载中 -->
    <div class="loadDiv"
         v-show="loadShow">
      <a-spin size="large" />
    </div>

    <!-- class="maxHeight300" -->
    <div id="container1"
         :style="{'opacity': data.length > 0 && !loadShow ? '1' : '0'}"></div>

    <!-- 暂无数据 -->
    <noData class="noData"
            :message="message"
            v-show="data === '' && !loadShow" />
  </div>
</template>

<script>
import { Bar } from '@antv/g2plot'
import noData from './noData'
import Com from '../../.././common/js/com.js'
import MixinSD from '../../../store/sd/mixinsSd.js'
export default {
  mixins: [MixinSD],
  props: ['ajaxParam', 'scrollTop'], /* ajaxParam: 接口入参参数  scrollTop: 页面滚动值 */
  data () {
    return {
      Eparam: '',
      category: [],
      date: [],
      data: '',
      message: '',
      oldData: [],
      loadShow: true // 加载中
    }
  },
  created () {
    this.loadShow = true // 加载中
    if (this.ajaxParam.code && this.ajaxParam.code.length !== 0) {
      this.category = this.ajaxParam.category
      this.codes = this.ajaxParam.code
      this.Eparam = this.ajaxParam.Eparam
      this.getHistoryData(this.ajaxParam, this.scrollTop)
    } else {
      this.data = ''
      this.message = '请先选择设备1！'
      this.loadShow = false
    }
  },
  methods: {
    initChart: function (ajaxParam, scrollTop) {
      this.loadShow = true // 加载中
      this.category = ajaxParam.category
      this.codes = ajaxParam.code
      this.Eparam = ajaxParam.Eparam
      if (ajaxParam.code && ajaxParam.code.length !== 0) {
        this.getHistoryData(ajaxParam, this.scrollTop)
      } else {
        this.data = ''
        this.message = '请先选择设备2！'
        this.loadShow = false
      }
    },
    getHistoryData (ajaxParam, scrollTop, codeString) { // 获取历史数据
      if (ajaxParam.code === '') {
        this.loadShow = false
        this.message = '请先选择设备3！'
        this.data = ''
      } else {
        var minTime = ajaxParam.start
        var maxTime = ajaxParam.end
        var ts = Com.stringTime(new Date())
        var data = {
          account: window.localStorage.getItem('account'),
          codes: ajaxParam.code,
          datetype: ajaxParam.timeLx,
          max_time: maxTime,
          min_time: minTime,
          params: this.Eparam,
          token: window.localStorage.getItem('token'),
          ts
        }
        const that = this
        this.getHistoryDeviceLogSD(data).then(function (value) {
          const result = value.data.data
          if (result !== '') {
            that.oldData = result
            if (that.oldData) {
              const data = []
              const EparamArr = (that.Eparam).split(',')
              for (var key in that.oldData) {
                const dataList = that.oldData[key]
                if (dataList.length > 0) {
                  for (let i = 0; i < EparamArr.length; i++) {
                    const key1 = EparamArr[i]
                    const json = {}
                    let total = 0
                    json.category = key
                    json.country = key1
                    dataList.forEach(item => {
                      if (item[key1]) {
                        total += Number(item[key1])
                      }
                    })
                    json.value = total
                    data.push(json)
                  }
                }
              }

              if (data.length === 0) {
                that.data = ''
                that.message = '暂无数据！'
                that.loadShow = false
              } else {
                that.data = data
                that.initChartDom(that.scrollTop)
              }
            } else {
              that.data = ''
              that.message = '暂无数据！'
              that.loadShow = false
            }
          } else {
            that.data = ''
            that.message = value.data.meta.message
            that.loadShow = false
          }
        })
      }
    },
    initChartDom: function (scrollTop) {
      document.getElementById('bodyWrapperId').scrollTop = scrollTop
      const that = this
      if (that.chart) {
        that.chart.destroy()
        that.createChart()
        that.chart.render()
        that.loadShow = false // 加载中
      } else {
        that.createChart()
        that.chart.render()
        that.loadShow = false // 加载中
      }
    },
    createChart: function () {
      const data = this.data
      this.chart = new Bar('container1', {
        data,
        xField: 'value',
        yField: 'category',
        seriesField: 'country',
        isPercent: true,
        isStack: true,
        color: ['rgba(91,143,249,0.85)', 'rgba(90,216,166,0.85)', 'rgba(93,112,146,0.85)', 'rgba(246,189,22,0.85)', 'rgba(232,104,74,0.85)', 'rgba(109,200,236,0.85)'], /** 自定义颜色 */
        grid: null,
        minBarWidth: 20,
        maxBarWidth: 60,
        label: { // 可手动配置 label 数据标签位置
          position: 'middle', // 'left', 'middle', 'right'
          layout: [ // 可配置附加的布局方法
            { type: 'interval-adjust-position' }, // 柱形图数据标签位置自动调整
            { type: 'interval-hide-overlap' }, // 数据标签防遮挡
            { type: 'adjust-color' } // 数据标签文颜色自动调整
          ],
          style: {
            fontSize: 0
          }
        },
        legend: {
          position: 'top-right',
          label: {
            style: {
              fontSize: 8,
              fill: '#8C8C8C'
            }
          }
        },
        tooltip: {
          showMarkers: false,
          formatter: (datum) => {
            let val = 0.00
            if (datum.value) {
              val = datum.value * 100
            }
            return {
              name: datum.country,
              value: val.toFixed(2) + '%'
            }
          }
        },
        xAxis: {
          grid: {
            line: {
              style: {
                lineWidth: 0
              }
            }
          },
          label: null
        },
        yAxis: {
          line: { // 坐标轴线
            style: {
              lineWidth: 0
            }
          },
          tickLine: { // 坐标轴刻度线
            style: {
              lineWidth: 0
            }
          },
          label: {
            style: {
              fontSize: 11,
              fill: 'rgba(0,0,0,0.45)',
              offsetX: 10
            }
          }
        }
      })
    }
  },
  components: {
    noData
  }
}
</script>

<style lang="less" scoped>
.barWrapper {
  //   padding: 0 0.24rem 0.24rem 0.24rem;
  position: relative;
  padding-bottom: 0.24rem;
  margin: 0 0.24rem;
  height: 3.6rem;
  width: calc(100% - 0.48rem);
  .loadDiv {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 100%;
    padding-top: 6%;
  }
  #container1 {
    width: 100%;
    height: calc(3.6rem - 0.24rem);
  }
  .noData {
    position: absolute;
    top: 0;
  }
}
</style>
